{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <mu-tabs :value.sync="curTab" change="tab" full-width :indicator-color="c1" inverse center :color="c2">
        <mu-tab>
            <div class="fs12"><span class="fa fa-font-awesome"></span></div>
            <div>发布任务</div>
        </mu-tab>
        <mu-tab>
            <div class="fs12"><span class="fa fa-truck"></span></div>
            <div>发布服务</div>
        </mu-tab>
    </mu-tabs>
    <div class="bdtso" v-if="curTab == 0">
        <div class="flrc pad5 mart5 marb5 tac c11 op7">
            <div class="flex1">认证</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">下单</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">雇佣</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">支付</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">确认</div>
        </div>
        <div class="bdtso bc13">
            <div class="flex-r flex-wrap tac fs8 lh2 pad10 mart20 marl20 marr20">
                <div class="pos-r">
                    <div class="wh15-15 bc02 flcc fs14 c13 round">
                        {#                        <span class="fa fa-cubes"></span>#}
                        <svg t="1582121198737" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2005" width="5vw" height="5vw">
                            <path d="M831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169zM895.884854 831.998871A63.835408 63.835408 0 0 1 831.912173 895.884854H192.087827c-17.112123 0-33.270563-6.574639-45.372232-18.67631S127.880338 849.110994 127.880338 831.998871V192.001129A64.236389 64.236389 0 0 1 192.087827 127.880338h639.824346A64.037705 64.037705 0 0 1 895.884854 192.001129v639.997742z"
                                  fill="#ffffff" p-id="2006"></path>
                            <path d="M791.998335 351.851551h-255.999097a31.970084 31.970084 0 0 0 0 63.940169h255.999097a31.970084 31.970084 0 0 0 0-63.940169zM791.998335 607.973471h-255.999097a31.970084 31.970084 0 0 0 0 63.940169h255.999097a31.970084 31.970084 0 0 0 0-63.940169zM344.001722 527.997686c-61.855792 0-111.985607 50.144265-111.985607 111.985606s50.144265 111.985607 111.985607 111.985607 111.985607-50.144265 111.985606-111.985607-50.129815-111.985607-111.985606-111.985606z m33.982213 145.982269a48.045438 48.045438 0 1 1 14.088511-33.982213 47.745605 47.745605 0 0 1-14.088511 33.985826zM417.395643 297.394035L311.999125 402.78694 270.6078 361.392003a31.970084 31.970084 0 1 0-45.213286 45.213285l63.997968 64.001581a31.970084 31.970084 0 0 0 45.213286 0l127.999548-127.999549a31.970084 31.970084 0 0 0-45.209673-45.213285z"
                                  fill="#ffffff" p-id="2007"></path>
                        </svg>
                    </div>
                    <div>我的发布</div>
                    <mu-ripple @click="goto('myTask')"></mu-ripple>
                </div>
                <div class="pos-r">
                    <div class="wh15-15 bc05 flcc fs14 c13 round">
                        {#                        <span class="fa fa-cubes"></span>#}
                        <svg t="1582121525403" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2359" width="8vw" height="8vw">
                            <path d="M675.1 366.4V262.3c0-4.7-1.9-9.3-5.2-12.7-3.4-3.4-7.9-5.2-12.7-5.2H223.8c-3.5 0-6.9 0.9-9.9 2.7-5.3 3.3-8.4 9.1-8.4 15.2v96.6c0.1 4.7 2 9.2 5.4 12.5l64.2 63.9c-29.8 31.7-50.8 71.9-59 116.6-2 11 6.4 21.1 17.6 21.1 8.6 0 16-6.1 17.6-14.6 2.4-13.5 6.3-26.9 11.7-39.9 30.2-73 101.5-120.6 180.5-120.6 107.8 0.2 195.2 87.6 195.4 195.4 0 79-47.6 150.3-120.6 180.5s-157.1 13.5-213-42.4c-28.9-28.9-47.3-65.4-54.2-103.9-1.5-8.5-9-14.6-17.6-14.6h-0.1c-11.1 0-19.5 10-17.6 20.9 19 108.5 113.7 191 227.7 191 127.6-0.2 231-103.6 231.2-231.2 0-63.7-25.8-121.5-67.5-163.3l60.7-49.7c4.5-3.2 7.2-8.6 7.2-14.2z m-330 18c-15.4 7.2-29.8 16.1-43.1 26.5l-60.7-59.1v-71.6h103.8v104.2z m161.1-13.3c-19.9-5.6-40.9-8.6-62.6-8.6s-42.7 3-62.6 8.6v-90.9h125.3l-0.1 90.9z m132.4-13.6l-59 49.3c-11.8-8.6-24.3-16.1-37.6-22.3V280.2h96.6v77.3z"
                                  fill="#ffffff" p-id="2360"></path>
                            <path d="M555.6 535.3l-69.4-11.1-30.1-63.7c-2.9-6.2-9-10.2-15.7-10.4-6.4 0.2-12.2 4.1-14.7 10l-32.2 62.6-69.8 8.9c-6.8 0.9-12.5 5.5-14.7 12s-0.5 13.6 4.3 18.4l51.5 51.5-12.9 69.1c-1.2 6.7 1.4 13.5 6.8 17.5 5.8 3.5 13.1 3.5 19 0l62.6-31.9 60.1 33.6c2.6 1.4 5.6 2.1 8.6 2.1l-2.1 0.4c5.2 0 10.2-2.4 13.5-6.3 3.4-4 4.8-9.3 4-14.4l-10.7-69.4 51.2-48.3c5-4.7 6.9-11.7 5-18.3-2.1-6.3-7.6-11.2-14.3-12.3z m-72.7 59.1c-4.3 4-6.3 9.9-5.4 15.7l6.8 42.9-38.3-20.7c-2.6-1.4-5.6-2.1-8.6-2.1l2.9 0.4c-3.4-0.4-6.9 0.2-10 1.8L391.6 652l7.9-42.9c1-5.8-0.9-11.6-5-15.7l-30.8-30.8 43.3-5.7c5.8-0.8 10.9-4.4 13.6-9.7l19.7-38.7 17.9 39c2.5 5.3 7.4 9.1 13.2 10l42.9 6.8-31.4 30.1z"
                                  fill="#ffffff" p-id="2361"></path>
                        </svg>
                    </div>
                    <div>金牌服务商</div>
                    <mu-ripple @click="goto('articles',{cat:2})"></mu-ripple>
                </div>
                <div class="pos-r">
                    <div class="wh15-15 bc03 flcc fs14 c13 round">
                        {#                        <span class="fa fa-cubes"></span>#}
                        <svg t="1582121780643" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="3248" width="5vw" height="5vw">
                            <path d="M511.7 81.5c2 0 3.9 0.3 5.8 0.9l329 99.7c8.5 2.6 14.2 10.3 14.2 19.1v425.5c0 40.5-11.2 80.2-32.3 114.7-21.1 34.6-51.3 62.6-87.3 81.1L511.7 940.1 282.4 822.5c-36-18.5-66.2-46.5-87.3-81.1-21.1-34.6-32.3-74.2-32.3-114.7V201.2c0-8.9 5.7-16.6 14.2-19.1l329-99.7c1.8-0.6 3.8-0.9 5.7-0.9m0-80c-9.8 0-19.5 1.4-29 4.3l-329 99.7c-42.2 12.8-71 51.6-71 95.7v425.5c0 112.5 63 215.6 163.1 266.9L484.4 1016c8.6 4.4 18 6.6 27.4 6.6 9.4 0 18.8-2.2 27.4-6.6l238.5-122.3c100.1-51.3 163.1-154.4 163.1-266.9V201.2c0-44.1-28.8-82.9-71-95.7l-329-99.7c-9.5-2.9-19.3-4.3-29.1-4.3z"
                                  fill="#ffffff" p-id="3249"></path>
                            <path d="M474.3 698c-10.2 0-20.5-3.9-28.3-11.7l-123-123c-15.6-15.6-15.6-40.9 0-56.6s40.9-15.6 56.6 0l94.7 94.7L704 371.7c15.6-15.6 40.9-15.6 56.6 0s15.6 40.9 0 56.6l-258 258c-7.9 7.8-18.1 11.7-28.3 11.7zM881 339.6c-3.8 0-7.7-0.6-11.6-1.7L530.7 235.2c-11.9-3.6-24.6-3.6-36.5 0L155.5 337.8c-21.1 6.4-43.5-5.5-49.9-26.7s5.5-43.5 26.7-49.9L471 158.6c27.1-8.2 55.8-8.2 82.9 0l338.7 102.6c21.1 6.4 33.1 28.7 26.7 49.9-5.3 17.3-21.1 28.5-38.3 28.5z"
                                  fill="#ffffff" p-id="3250"></path>
                        </svg>
                    </div>
                    <div>安全知识</div>
                    <mu-ripple @click="goto('articles',{cat:1})"></mu-ripple>
                </div>
            </div>
            <div class="pad20">
                <div v-if="status.login == 0">
                    <mu-button @click="goto('login')" round full-width large>登陆后发布</mu-button>
                </div>
                <div class="c02 fs8 pad5 round3" v-if="status.login == 1">
                    <div class=" bcf pad5" v-if="status.shiming == 0">
                        <div class="flrc pos-r pad10 bdbda">
                            <div class="c02"><span class="fa fa-warning"></span></div>
                            <mu-ripple @click="goto('myAuth')" class="flex1 padl10">请完成实名认证（需审核）</mu-ripple>
                            <span class="fa fa-angle-right c12"></span>
                        </div>
                    </div>
                    <div class=" bcf pad5" v-if="status.dianhua == 0">
                        <div class="flrc pos-r pad10 bdbda">
                            <div class="c02"><span class="fa fa-warning"></span></div>
                            <mu-ripple @click="goto('myContact')" class="flex1 padl10">设置联系人</mu-ripple>
                            <span class="fa fa-angle-right c12"></span>
                        </div>
                    </div>
                    <div class=" bcf pad5" v-if="status.dizhi == 0">
                        <div class="flrc pos-r pad10 bdbda">
                            <div class="c02"><span class="fa fa-warning"></span></div>
                            <mu-ripple @click="goto('myAddress')" class="flex1 padl10">设置常用地址</mu-ripple>
                            <span class="fa fa-angle-right c12"></span>
                        </div>
                    </div>
                </div>

                <mu-button @click="
            (status.login == 1 && status.shiming == 1 && status.dianhua == 1 && status.dizhi == 1)?
            goto('newTaskStep'):
            showToast('请先完善基本信息')
" :color="c1" round full-width large v-if="status.login == 1">
                    立即发布
                </mu-button>
            </div>
        </div>

        <div class="bdtso">
            <div class="pad10">推荐服务</div>
            <div class="bc13 mar5 pos-r" v-for="item in serviceList">
                <div style="height: 60vw;background-position: center;" :style="picBg(item.cover)"></div>
                <div class="flrc ofe lh2 pad5">
                    <div class="flex1 ofe">[[item.name]]</div>
                    <div class="c1 fs8">￥[[item.price]]/[[item.unit]]</div>
                </div>
                <mu-ripple @click="goto('servicesInfo',{id:item.id})"></mu-ripple>
            </div>
        </div>
    </div>
    <div class="" v-if="curTab == 1">
        <div class="flrc pad10 tac c11 op7 bcf">
            <div class="flex1">认证</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">发布</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">审核</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">上线</div>
            <div class=""><span class="fa fa-angle-right"></span></div>
            <div class="flex1">成交</div>
        </div>
        <div class="bdtso">
            <div class="flex-r flex-wrap tac fs8 lh2 pad10 mart20 marl20 marr20">
                <div class="pos-r">
                    <div class="wh15-15 bc01 flcc fs14 c13 round10">
                        <svg t="1582122072364" class="" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="9505" width="8vw" height="8vw">
                            <path d="M306.820741 191.525926c-51.579259 11.188148-103.632593 63.241481-114.820741 114.820741-21.428148 99.176296 53.475556 186.785185 148.954074 186.785185l152.651852 0 0-6.447407 0-31.478519L493.605926 333.937778l-0.18963 0C489.623704 241.682963 403.816296 170.571852 306.820741 191.525926zM455.68 455.205926l-114.725926 0c-63.905185 0-115.579259-52.242963-114.725926-116.337778 0.853333-61.819259 51.294815-112.260741 113.114074-113.114074 64.094815-0.853333 116.337778 50.820741 116.337778 114.725926L455.68 455.205926z"
                                  p-id="9506" fill="#ffffff"></path>
                            <path d="M832.663704 306.346667c-11.188148-51.579259-63.241481-103.632593-114.820741-114.820741-96.900741-20.954074-182.802963 50.157037-186.595556 142.506667l-0.18963 0 0 121.173333 0 31.478519 0 6.447407 152.651852 0C779.093333 493.131852 854.091852 405.522963 832.663704 306.346667zM568.983704 340.48c0-63.905185 52.242963-115.579259 116.337778-114.725926 61.819259 0.853333 112.260741 51.294815 113.114074 113.114074 0.853333 64.094815-50.820741 116.337778-114.725926 116.337778l-114.725926 0L568.983704 340.48z"
                                  p-id="9507" fill="#ffffff"></path>
                            <path d="M192 717.842963c11.188148 51.579259 63.241481 103.632593 114.820741 114.820741 96.900741 20.954074 182.802963-50.157037 186.595556-142.506667l0.18963 0L493.605926 568.983704l0-31.478519 0-6.447407-152.651852 0C245.475556 531.057778 170.571852 618.666667 192 717.842963zM455.68 683.70963c0 63.905185-52.242963 115.579259-116.337778 114.725926-61.819259-0.853333-112.260741-51.294815-113.114074-113.114074-0.853333-64.094815 50.820741-116.337778 114.725926-116.337778l114.725926 0L455.68 683.70963z"
                                  p-id="9508" fill="#ffffff"></path>
                            <path d="M683.70963 531.057778l-152.651852 0 0 6.447407 0 31.478519 0 121.173333 0.18963 0c3.887407 92.34963 89.694815 163.460741 186.595556 142.506667 51.579259-11.188148 103.632593-63.241481 114.820741-114.820741C854.091852 618.666667 779.093333 531.057778 683.70963 531.057778zM798.435556 685.321481C797.582222 747.140741 747.140741 797.582222 685.321481 798.435556c-64.094815 0.853333-116.337778-50.820741-116.337778-114.725926l0-114.725926 114.725926 0C747.614815 568.983704 799.288889 621.226667 798.435556 685.321481z"
                                  p-id="9509" fill="#ffffff"></path>
                        </svg>
                    </div>
                    <div>我的服务</div>
                    <mu-ripple @click="goto('myService')"></mu-ripple>
                </div>
                <div class="pos-r">
                    <div class="wh15-15 bc05 flcc fs14 c13 round10">
                        <svg t="1582122124859" class="marl1" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="10192" width="6vw" height="6vw">
                            <path d="M435.2 179.2c-105.677 0-153.6 63.078-153.6 153.6h51.2c1.74-64.205 43.52-100.762 102.4-102.4 51.712 1.638 74.547 29.798 76.288 77.517 0 24.678-17.818 53.453-53.453 86.425-41.062 36.25-48.435 62.464-48.435 92.058v51.2h51.2v-51.2c0-16.384 8.806-38.605 37.376-64.922 42.803-37.888 64.205-75.673 64.205-113.561 0-75.674-45.159-128.717-127.181-128.717zM409.6 640h51.2v-51.2h-51.2V640z m435.2-163.43V122.06S835.174 51.2 768 51.2H51.2v732.57s9.626 59.596 102.4 61.03c92.774 1.434 281.6 0 281.6 0-11.162 1.434 409.6-368.23 409.6-368.23zM409.6 793.6s-236.851-0.717-256 0c-59.187 2.253-51.2-57.14-51.2-57.14V98.51H768c33.587 0 25.6 28.057 25.6 47.309v307.2L409.6 793.6z m547.43-173.158l-88.985-83.047-15.77-14.643-15.667 14.643-66.765 62.26-244.736 228.249-4.813 4.403-1.33 6.144L486.4 972.8l147.763-26.829 6.656-1.229 4.813-4.403 244.736-228.25 66.765-62.259 15.77-14.643-15.873-14.745zM618.803 906.445l-71.885 13.414 14.336-67.072 224.256-209.1 57.55 53.657-224.257 209.1z m255.795-238.49l-57.548-53.657 35.328-32.87 57.548 53.657-35.328 32.87z"
                                  fill="#ffffff" p-id="10193"></path>
                        </svg>
                    </div>
                    <div>常见问题</div>
                    <mu-ripple @click="goto('articles',{cat:4})"></mu-ripple>
                </div>

                <div class="pos-r">
                    <div class="wh15-15 bc03 flcc fs14 c13 round10">
                        <svg t="1582121525403" class="marl2" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="2359" width="9.5vw" height="9.5vw">
                            <path d="M675.1 366.4V262.3c0-4.7-1.9-9.3-5.2-12.7-3.4-3.4-7.9-5.2-12.7-5.2H223.8c-3.5 0-6.9 0.9-9.9 2.7-5.3 3.3-8.4 9.1-8.4 15.2v96.6c0.1 4.7 2 9.2 5.4 12.5l64.2 63.9c-29.8 31.7-50.8 71.9-59 116.6-2 11 6.4 21.1 17.6 21.1 8.6 0 16-6.1 17.6-14.6 2.4-13.5 6.3-26.9 11.7-39.9 30.2-73 101.5-120.6 180.5-120.6 107.8 0.2 195.2 87.6 195.4 195.4 0 79-47.6 150.3-120.6 180.5s-157.1 13.5-213-42.4c-28.9-28.9-47.3-65.4-54.2-103.9-1.5-8.5-9-14.6-17.6-14.6h-0.1c-11.1 0-19.5 10-17.6 20.9 19 108.5 113.7 191 227.7 191 127.6-0.2 231-103.6 231.2-231.2 0-63.7-25.8-121.5-67.5-163.3l60.7-49.7c4.5-3.2 7.2-8.6 7.2-14.2z m-330 18c-15.4 7.2-29.8 16.1-43.1 26.5l-60.7-59.1v-71.6h103.8v104.2z m161.1-13.3c-19.9-5.6-40.9-8.6-62.6-8.6s-42.7 3-62.6 8.6v-90.9h125.3l-0.1 90.9z m132.4-13.6l-59 49.3c-11.8-8.6-24.3-16.1-37.6-22.3V280.2h96.6v77.3z"
                                  fill="#ffffff" p-id="2360"></path>
                            <path d="M555.6 535.3l-69.4-11.1-30.1-63.7c-2.9-6.2-9-10.2-15.7-10.4-6.4 0.2-12.2 4.1-14.7 10l-32.2 62.6-69.8 8.9c-6.8 0.9-12.5 5.5-14.7 12s-0.5 13.6 4.3 18.4l51.5 51.5-12.9 69.1c-1.2 6.7 1.4 13.5 6.8 17.5 5.8 3.5 13.1 3.5 19 0l62.6-31.9 60.1 33.6c2.6 1.4 5.6 2.1 8.6 2.1l-2.1 0.4c5.2 0 10.2-2.4 13.5-6.3 3.4-4 4.8-9.3 4-14.4l-10.7-69.4 51.2-48.3c5-4.7 6.9-11.7 5-18.3-2.1-6.3-7.6-11.2-14.3-12.3z m-72.7 59.1c-4.3 4-6.3 9.9-5.4 15.7l6.8 42.9-38.3-20.7c-2.6-1.4-5.6-2.1-8.6-2.1l2.9 0.4c-3.4-0.4-6.9 0.2-10 1.8L391.6 652l7.9-42.9c1-5.8-0.9-11.6-5-15.7l-30.8-30.8 43.3-5.7c5.8-0.8 10.9-4.4 13.6-9.7l19.7-38.7 17.9 39c2.5 5.3 7.4 9.1 13.2 10l42.9 6.8-31.4 30.1z"
                                  fill="#ffffff" p-id="2361"></path>
                        </svg>
                    </div>
                    <div>金牌案例</div>
                    <mu-ripple @click="goto('articles',{cat:5})"></mu-ripple>
                </div>
            </div>
        </div>
        <div class="pad20">
            <div v-if="status.login == 0">
                <mu-button @click="goto('login')" round full-width large>登陆后发布</mu-button>
            </div>
            <div v-if="status.login == 1 && status.mendian == 0">
                <mu-button @click="openShop('')" round full-width large>开通店铺</mu-button>
            </div>
            <div class="c12 fs8 pad5" v-if="status.login == 1 && status.mendian == 1">
                <div class=" bcf pad5" v-if="status.shiming == 0">
                    <div class="flrc pos-r pad10 bdbda">
                        <div class="c02"><span class="fa fa-warning"></span></div>
                        <mu-ripple @click="goto('myAuth')" class="flex1 padl10">请完成实名认证（需审核）</mu-ripple>
                        <span class="fa fa-angle-right c12"></span>
                    </div>
                </div>
                <div class=" bcf pad5" v-if="status.weizhi == 0">
                    <div class="flrc pos-r pad10 bdbda">
                        <div class="c02"><span class="fa fa-warning"></span></div>
                        <mu-ripple @click="goto('shopInfo')" class="flex1 padl10">请设置您的店铺信息</mu-ripple>
                        <span class="fa fa-angle-right c12"></span>
                    </div>
                </div>
                <div class=" bcf pad5" v-if="status.hangye == 0">
                    <div class="flrc pos-r pad10 bdbda">
                        <div class="c02"><span class="fa fa-warning"></span></div>
                        <mu-ripple @click="goto('shopCat')" class="flex1 padl10">请选择经营行业（需审核）</mu-ripple>
                        <span class="fa fa-angle-right c12"></span>
                    </div>
                </div>
            </div>

            <mu-button @click="
            (status.login == 1 && status.shiming == 1 && status.weizhi == 1)?
            goto('newService'):
            showToast('请先完善基本信息')
" color="primary" round full-width large v-if="status.login == 1 && status.mendian == 1">立即发布
            </mu-button>
        </div>
        <div class="bcf">
            <div class="pad10">他们正在赚取佣金</div>
            <div class="padl10 padr10" v-if="isTrue(announce)">
                <div class="pad5 lh15 c12 fs8 bdbdo" v-for="item in announce[0]">
                    <div class="flex1 fs9 c11 op9">[[item.text]]</div>
                    <div class="fs7">[[str2time(item.createAt)]]</div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
